<template>
  <div class="layout__side">
      <ul class="layout__menu">
        <!-- 
        <li class="layout__item">
          <span class="layout__link">
            <span class="layout__link__inner">
              <a-icon type="home" style="font-size: 23px;" />
              <span class="layout__link__inner_name">
                创作管理
              </span>
            </span>
          </span>
          <ul class="layout__sub-menu">
            <li>
              <span class="layout__link layout__link_to">
                <span class="layout__link__inner">
                  <span style="width: 23px; height: 23px; display: inline-block"></span>
                  <span class="layout__link__inner_name">
                    新建问卷
                  </span>
                </span>
              </span>
            </li>
            <li>
              <span class="layout__link layout__link_to">
                <span class="layout__link__inner">
                  <span style="width: 23px; height: 23px; display: inline-block"></span>
                  <span class="layout__link__inner_name">
                    我的素材
                  </span>
                </span>
              </span>
            </li>
          </ul>
        </li>
        -->

        <li class="layout__item" v-for="(item, index) in menus" :key="index">
          <span class="layout__link"
                :class="[currentPath == item.path.split('/:')[0] ? 'layout__currentlink' : '', item.children && item.children.length ? '' : 'layout__link_to']"
                @click="() => !item.children && routeClickHandle(item.path)"
          >
            <span class="layout__link__inner" >
              <a-icon :type="item.meta.icon" style="font-size: 23px;" />
              <span class="layout__link__inner_name">
                {{item.meta.title}}
              </span>
            </span>
          </span>
          
          <ul class="layout__sub-menu">

            <li v-for="(i, k) in item.children" :key="k">
              <span class="layout__link layout__link_to"
                :class="[currentPath == i.path.split('/:')[0] ? 'layout__currentlink' : '']"
                @click="() => !i.children && routeClickHandle(i.path)"
              >
                <span class="layout__link__inner">
                  <span style="width: 23px; height: 23px; display: inline-block"></span>
                  <span class="layout__link__inner_name">
                    {{i.meta.title}}
                  </span>
                </span>
              </span>
            </li>


          </ul>
        </li>
      
      </ul>
  </div>
</template>

<script>

export default {
  name: 'SideMenu',
  props: {
    menus: []
  },
  computed: {
    currentPath () {
      return this.$route.path
    }
  },
  methods: {
    routeClickHandle (path) {
      if (this.currentPath === path.split('/:')[0]) return;
      this.$router.push(`${path.split('/:')[0]}`)
    }
  }
}
</script>

<style lang="less" scoped>
  @greenColor: #07C160;
  @hoverColor: #eff0f1;

  .layout__side {
    width: 100%;
    float: none;
    position: absolute;
    transition: margin .3s,width .3s;
    .layout__menu{
      width: 100%;
      margin-top: -14px;
      .layout__item:before {
        content: " ";
        position: absolute;
        bottom: 0;
        left: 74px;
        width: 43%;
        border-top: 1px solid #E4E8EB;
      };
      .layout__item {
        position: relative;
        width: 100%;
        padding: 8px 0;
        line-height: 1.6;
        .layout__link_to:hover {
          background: @hoverColor;
          cursor: pointer;
        }
        .layout__link {
          display: inline-block;
          width: 100%;
          padding-left: 36px;
          padding-right: 20px;
          // color: @greenColor;
          line-height: 50px;
          .layout__link__inner {
            display: inline-block;
            vertical-align: top;
            max-width: 100%;
            .layout__link__inner_name{
              width: auto;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding-left:8px;
              position: relative;
              line-height: 50px;
            }
          }
        }

        .layout__sub-menu {
          font-size: 14px;
          li {
            line-height: 36px;
          }
        }
      };
      
    }


  }


  .layout__currentlink {
    color: @greenColor
  }
</style>
